<template>
  <section class="account-main">
    <transition name="fade">
      <template v-if="page==='修改个人信息'">
        <modify-info></modify-info>
      </template>
      <template v-else-if="page==='查看头像'">
        <modify-avatar></modify-avatar>
      </template>
      <template v-else-if="page==='修改密码'">
        <modify-password></modify-password>
      </template>
    </transition>
  </section>
</template>
<script>
import ModifyInfo from './Main/ModifyInfo'
import ModifyAvatar from './Main/ModifyAvatar'
import ModifyPassword from './Main/ModifyPassword'
export default {
  name: 'AccountMain',
  props: {
    page: {
      type: String,
      default: '修改个人信息'
    }
  },
  components: {
    ModifyInfo,
    ModifyAvatar,
    ModifyPassword
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'

.account-main
  position relative
  overflow hidden
  padding 30px 20px
  border-radius 6px
  box-shadow 0 5px 15px rgba(0, 0, 0, 0.2)
  & > div:first-child
    position absolute
    // 40px为父元素左右padding和
    width calc(100% - 40px)
.fade-enter-active, .fade-leave-active
  transition opacity 0.5s ease-in-out
.fade-enter, .fade-leave-to
  opacity 0
</style>
